<template>
  <div class="option" :class="{ 'option-loop': !route.meta.loopType }">
    <div class="rollback" @click="goBack" v-if="props.flag" :style="{ borderColor: store.styleInfo.shmentColor }">
      <div class="returnIcon-box" :style="{ background: store.styleInfo.shmentColor }">
        <i class="doorIcon returnIcon">&#xe66f;</i>
        <span class="text">返回</span>
      </div>
      <!-- <img src="http://static.jiyi.show/template/template1/icon/returnIcon.png" alt="" /> -->
    </div>
    <div
      class="add-btn1 iconFont"
      id="digitalShowroom"
      v-if="route.meta.title !== '展品详情' && route.meta.title !== '学术研究详情' && store.digitalShowroom"
      @click="open(store.digitalShowroom)"
    >
      <i class="doorIcon">&#xe676;</i>
    </div>
    <div class="Comparison" v-if="flag">
      <Comparison />
    </div>
    <div class="iconFont1" v-if="route.meta.title !== '展品详情' && route.meta.title !== '学术研究详情'"><strat /></div>
    <t-popup content="" placement="left" v-if="route.meta.title !== '展品详情' && route.meta.title !== '学术研究详情'">
      <template #content>
        <shear @shearType="shearType" />
      </template>
      <div class="add-btn1 iconFont">
        <i class="doorIcon">&#xe647;</i>

        <!-- <t-icon name="share"></t-icon> -->
      </div>
    </t-popup>
    <div
      class="iconFont iconFont2"
      v-if="
        route.meta.title !== '展品图库' &&
        route.meta.title !== '文创商品' &&
        route.meta.title !== '版权声明' &&
        route.meta.title !== '留言表' &&
        route.meta.title !== '学术研究' &&
        TopIconFlag
      "
      @click="Top"
    >
      <i class="doorIcon">&#xe64a;</i>
    </div>
  </div>
</template>

<script lang="ts">
// @ts-nocheck
import { defineComponent, defineProps, ref, watch } from 'vue';
import shear from '@/components/shear/shear.vue';
import { outLogin } from '@/utils/minxin';
// import strat from '@/components/start/start.vue';
import strat from './start.vue';
import router from '@/router';
// export default defineComponent({
//   name: 'Nav',
// });

// watch(
//   () => route,
//   () => {
//     //console.log(route);

//     if (route.name === 'templateExhibitsInfo' || route.name === 'templateExhibitsInfoLoop') {
//       flag.value = true;
//     }
//   },
//   { deep: true, immediate: true },
// );
</script>
<script lang="ts" setup>
// @ts-nocheck
import { ref, onMounted, nextTick } from 'vue';
import Comparison from '@/components/comparison/comparison.vue';
import { toQQzone, toQQ, toWeibo, toWechat } from '@/utils/shear';
import { useRoute } from 'vue-router';
import { pathList, pathListLoop } from '../../route';
import { useProjectStore } from '@/store';
const store = useProjectStore();
const props = defineProps({
  flag: {
    type: Boolean,
    default: false,
  },
  name: {
    type: Boolean,
    default: false,
  },
});

const TopIconFlag = ref(false);
const emit = defineEmits(['top']);
const Top = () => {
  emit('top');
  const element = document.getElementById('tem1-scroll-box-top');
  if (element) {
    element.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
  setTimeout(() => {
    TopIconFlag.value = false;
  }, 500);
};
const goBack = () => {
  //console.log(router, route, window.history.state);

  if (!window.history.state.back) {
    router.push({
      name: route.meta.loopType ? pathListLoop[0] : pathList[0],
      // query: { projectId: localStorage.getItem('projectId') },
    });
  } else {
    router.go(-1);
  }
  // if (route.name === 'templateItemChild' || route.name === 'templateItemChildLoop') {
  //   router.push({
  //     path: route.meta.loopType ? pathListLoop[0] : pathList[0],
  //     query: { projectId: localStorage.getItem('projectId') },
  //   });
  // } else if (route.name === 'templateExhibitsInfo' || route.name === 'templateExhibitsInfoLoop') {
  //   router.push({
  //     path: route.meta.loopType ? pathListLoop[1] : pathList[1],
  //     query: { projectId: localStorage.getItem('projectId') },
  //   });
  // } else if (route.name === 'templateResearchInfo' || route.name === 'templateResearchInfoLoop') {
  //   router.push({
  //     path: route.meta.loopType ? pathListLoop[3] : pathList[3],
  //     query: { projectId: localStorage.getItem('projectId') },
  //   });
  // } else {
  //   router.go(-1);
  // }
};
const route = useRoute();
const flag = ref(false);
// //console.log(route, 'route');
if (route.name === 'templateExhibitsInfo' || route.name === 'templateExhibitsInfoLoop') {
  flag.value = true;
} else {
  flag.value = false;
}
const shearType = (e: number) => {
  //分享
  let url = window.location.href;
  let title = '';
  switch (e) {
    case 1:
      toQQzone(url, title);
      break;
    case 2:
      toQQ(url, title);
      break;
    case 3:
      toWeibo(url, title);
      break;
    default:
      toWechat(url, title);
      break;
  }
};
const viewportHeight = ref(0);
const tabListType = ref(false);
viewportHeight.value = window.innerHeight;
const handleFixedChange = () => {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  // //console.log('scrollTop', scrollTop, window.innerHeight);

  if (scrollTop >= window.innerHeight) {
    TopIconFlag.value = true;
  } else {
    TopIconFlag.value = false;
  }
};

const open = (url: any) => {
  if (url) {
    window.open(url, '_blank');
  }
};
onMounted(() => {
  // content-by-id-407
  nextTick(() => {
    window.addEventListener('scroll', () => {
      // handleFixedChange();
    });
    // window.addEventListener('wheel', () => {
    //   handleFixedChange();
    //   var box = document.getElementById('tem1-heard-item'); // 替换为你的盒子元素ID
    //   var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    //   var boxTop = Math.abs(box.getBoundingClientRect().top) + scrollTop;
    //   console.log(boxTop, 'boxTop', scrollTop);

    //   if (boxTop >= window.innerHeight) {
    //     TopIconFlag.value = true;
    //   } else {
    //     TopIconFlag.value = false;
    //   }
    // });
    window.addEventListener('wheel', () => {
      handleFixedChange();
      var box = document.getElementById('template1-scorll-box'); // 替换为你的盒子元素ID
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      // var boxTop = Math.abs(box.getBoundingClientRect().top) + scrollTop;
      // console.log(box.scrollTop, 'boxTop', scrollTop, window.innerHeight);
      if (!box) {
        return;
      }
      if (box.scrollTop >= window.innerHeight || scrollTop >= window.innerHeight) {
        TopIconFlag.value = true;
      } else {
        TopIconFlag.value = false;
      }
    });
  });
});
</script>

<style lang="less" scoped>
.option {
  position: fixed;
  right: 30px;
  bottom: 40px;
  display: flex;
  align-items: center;
  flex-direction: column;
  z-index: 246;
}
.option-loop {
  right: 88px;
}
.rollback :hover {
  opacity: 0.7;
}
.Comparison .swap-box-icon :hover .swap-box-icon {
  opacity: 0.7 !important;
}
/deep/.swap-box {
  margin-right: 0px !important;
}
.iconFont1:hover {
  // background: rgba(250, 250, 250, 0.7) !important;
  // opacity: 0.7 !important;
}
.iconFont2:hover {
  opacity: 0.7 !important;
}
.add-btn1:hover {
  opacity: 0.7 !important;
}
.iconFont {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  font-size: 24px;
  text-align: center;
  line-height: 50px;
  color: #ffffff;
  margin-bottom: 28px;
  // opacity: 0.7;
  cursor: pointer;
  // position: relative;
  :deep(.t-icon) {
    font-size: 30px;
    line-height: 30px;
  }
}
.iconFont1 {
  // opacity: 0.7;
}
.a {
  line-height: 50px;
}

.Comparison {
  margin-bottom: 28px;
  :deep(.comparison-box) {
    width: 50px;
    height: 50px;
    position: relative !important;
    bottom: 0px;
    right: 0px;
  }
  :deep(.comparison-box:hover) {
    opacity: 0.7;
    .item-box {
      // background: rgba(255, 255, 255, 0.5);
    }
  }
  :deep(.item-box) {
    width: 50px;
    height: 50px;
    // transform: rotate(90deg);
    background: rgba(0, 0, 0, 0.2);
  }
}
.rollback {
  width: 56px;
  height: 56px;
  display: flex;
  cursor: pointer;
  margin-bottom: 28px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #fff;
  border: 1px solid;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: SourceHanSerifCN;
  i {
  }
  > img {
    width: 100%;
    height: 100%;
  }
}
.doorIcon {
  font-size: 24px !important;
}
.returnIcon-box {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  .returnIcon {
    font-size: 15px;
  }
  .text {
    margin-top: -3px;
  }
}
</style>
